import React from 'react';
import {StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native';
import SpinnerIndicator from './SpinnerIndicator.tsx';

export type SpinnerProps = {
    textColor?: string,
    iconColor?: string,
    description?: string,
    style?: StyleProp<ViewStyle>;
    textStyle?: StyleProp<TextStyle>;
};

const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        justifyContent: 'center',
        paddingVertical: 30,
    },
});
const Spinner = (props: SpinnerProps, ref: any) => {
    const {textColor = '#86939e', iconColor='#86939e', description} = props;
    return (
        <View style={[styles.container, props.style]}>
            <SpinnerIndicator color={iconColor} size={26} />
            {
                description ? (
                    <Text
                        style={[{color: textColor, fontSize: 16, marginTop: 10}, props.textStyle]}>{description}</Text>
                ) : null
            }
        </View>
    );
};

export default React.forwardRef(Spinner);
